<template>
  <view class="honor-personal">
    <text class="absolute-title"> 个人荣誉 </text>
    <!-- #ifdef H5 -->
    <AppShare isHerf :desc="curEnterpriseName" title="个人荣誉" />
    <!-- #endif -->
    <personal-info-card
      :enterprise-info="enterpriseInfo"
      :bottom-buttons="
        enterpriseInfo.honorStrList ? enterpriseInfo.honorStrList : []
      "
    />
    <!-- @bottom-btn-click-emit="handleBottomBtnClick" -->
    <honor-box
      class="enterprise-honor-box"
      :current-idx="currentIdx"
      :honor-title="`${enterpriseHonorTotal}项个人荣誉`"
      :tab-list="enterpriseHonorTabs"
      @tab-click="handleEnterpriseHonorTabClick"
    >
      <view v-if="enterpriseHonorList?.length > 0" class="honor-list">
        <view
          class="honor"
          @click="getPassHonor"
          v-for="(honor, idx) in enterpriseHonorList"
          :key="idx"
        >
          <text class="honor_text">
            {{ honor.userHonor }}
          </text>
        </view>
      </view>
      <up-empty v-else mode="data" text="个人暂无该级别荣誉" textSize="28rpx" />
    </honor-box>

    <honor-box
      class="enterprise-badge-box"
      :honor-title="`${enterpriseBadgeTotal}项个人徽章`"
      :tab-list="enterpriseBadgeTabs"
      :current-idx="currentIdx"
      @tab-click="handleEnterpriseBadgeTabClick"
    >
      <view v-if="enterpriseBadgeList?.length > 0" class="honor-badge-list">
        <view
          class="badge"
          v-for="(badge, idx) in enterpriseBadgeList"
          :key="idx"
          @tap="handleBadgeClick(badge)"
        >
          <image class="badge-img" :src="badge.badgeImageUrl" />
          <text class="badge-text">
            {{ badge.badgeName }}
          </text>
        </view>
      </view>
      <up-empty v-else mode="data" text="个人暂无该级别徽章" textSize="28rpx" />
    </honor-box>

    <view class="honor-charts">
      <Radar
        :width="700"
        id="htzyRadarId"
        :categories="radarCategories"
        :chartData="radarChartData"
      />
      <RankText :totalScore="totalScoreVal" ></RankText>
    </view>

    <honor-box
      class="honor-dim-box"
      :show-title="false"
      @tab-click="handleHonorDimTabClick"
      :tab-list="honorDimensionalityTabs"
    >
      <view class="text-content">
        <text class="text">指数等级：</text>
        <text class="h4">{{ gradeIndex }}</text>
      </view>
      <tag :label-data="curDimTagsList" @handle-tag-click="handleTagClick" />
    </honor-box>
    <!-- <view class="honor-img"></view> -->
  </view>
</template>
<script setup>
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  generateRandomNumId,
  getUrlParamsInH5,
  getUrlParamsInWeixin,
  wxSetUpShareFunction,
} from "@/utils/utils";
import {
  getUserInfoByIdApi,
  getUserBadgeDetailApi,
  getUserHonorScoreApi,
  getUserHasHonorListApi,
} from "@/package_honour/pages/api/honor-detail";
// import { getUserInfoPageListApi } from "@/api/honour/personal-list"
import personalInfoCard from "./components/personal-info-card.vue";
import honorBox from "./components/honor-box.vue";
import Radar from "@/package_honour/pages/honour/components/radar.vue";
import RankText from "@/package_honour/pages/honour/components/rank-text.vue";
import Tag from "@/package_honour/pages/honour/components/tag.vue";
import AppShare from "@/components/appShare/index.vue";
import { customNav } from "@/utils/customNav";

const enterpriseCardBtns = [
  // {
  //   btnText: "企业详情",
  // },
  // {
  //   btnText: "元宇宙空间",
  // },
];
const curEnterpriseId = ref(""); /* 当前企业id */
const curEnterpriseName = ref(""); /* 当前企业名称 */
const enterpriseInfo = ref({}); /* 企业详情 */
const enterpriseHonorTabs = ref([]); /* 荣誉tabs */
const enterpriseBadgeTabs = ref([]); /* 徽章tabs */
const honorDimensionalityTabs = ref([]); /* 各项维度荣誉tabs */
const enterpriseHonorList = ref([]); /* 个人当前荣誉分类 */
const enterpriseBadgeList = ref([]); /* 个人当前徽章分类 */
const enterpriseHonorTotal = ref(0); /* 荣誉总数 */
const enterpriseBadgeTotal = ref(0); /* 徽章总数 */
const badgeData = ref([]); /* 徽章数据 */
const currentIdx = ref(0); /* 默认下标 */
const gradeIndex = ref(""); /* 等级指数 */
const radarCategories = ref([]); /* 雷达图标题分类 */
const curDimTagsData = ref({}); /* 荣誉数据 */
const curDimTagsList = ref([]); /* 各项荣誉数据 */
const totalScoreVal = ref(""); /* 各项荣誉数据 */
/* 雷达图数据 */
const radarChartData = ref([
  {
    name: "该个人指数",
    data: [],
  },
  // {
  //   name: "行业个人平均数值",
  //   data: [],
  // },
]);
// 荣誉切换
const handleEnterpriseHonorTabClick = (data) => {
  console.log("标签切换", data);
  if (enterpriseInfo.value.honorMapGroupingByGrade[data.name]) {
    enterpriseHonorList.value =
      enterpriseInfo.value.honorMapGroupingByGrade[data.name];
  } else {
    enterpriseHonorList.value = [];
  }
};
// 徽章切换
const handleEnterpriseBadgeTabClick = (data) => {
  console.log(badgeData.value);
  console.log(data);
  enterpriseBadgeList.value = badgeData.value.filter(
    (item) => item.badgeTypeName == data.name
  );
};
const getPassHonor = (data) => {};
const handleTagClick = (data) => {};
// 个人维度荣誉切换
const handleHonorDimTabClick = (data) => {
  console.log("切换点击", data);
  curDimTagsList.value = curDimTagsData.value[data.key];
  const result = radarCategories.value.filter(item => item.includes(data.name));
  let name = result[0]
  gradeIndex.value = name.split("\n")[1]
};
// 个人雷达图
const getUserHonorScore = async () => {
  // 个人维度荣誉列表
  const list = await getUserHasHonorListApi(curEnterpriseId.value);
  //  const { code,data } = res;
  //  if (code ==200 ) {
  //      curDimTagsData.value = data
  //  }
  const listCode = list.code;
  const listData = list.data;
  if (listCode == 200) {
    curDimTagsData.value = listData;
  }
  let res = await getUserHonorScoreApi(curEnterpriseId.value);
  console.log(res);
  const { code, data } = res || {};
  if (code == 200) {
    const { honorUserScoreVo, honorScoreMaxVo, totalScore } = data || {};
    console.log("honorUserScoreVo", honorUserScoreVo);
    console.log("honorScoreMaxVo", honorScoreMaxVo);
    console.log("totalScore", totalScore);
    totalScoreVal.value = totalScore;
    // console.log("honorScoreStageConfigEntity",honorScoreStageConfigEntity);
    const gradeMap = {
      专业力: "zylGrade",
      进取心: "jqxGrade",
      责任心: "zrxGrade",
      创新力: "cxlGrade",
      敬业心: "jyxGrade",
      沟通力: "gtlGrade",
    };
    const dimListMap = {
      专业力: "zylList",
      进取心: "jqxList",
      责任心: "zrxList",
      创新力: "cxlList",
      敬业心: "jyxList",
      沟通力: "gtlList",
    };
    
    const gradeArr = ["C", "B", "A", "A+", "S"];
    const average = honorUserScoreVo;
    honorDimensionalityTabs.value = honorScoreMaxVo.map((dim, idx) => {
      return {
        name: dim.dimensionName,
        value: idx,
        key: dimListMap[dim.dimensionName],
      };
    });
    curDimTagsList.value =
      curDimTagsData.value[honorDimensionalityTabs.value[0].key];
    Array.isArray(honorScoreMaxVo) &&
      honorScoreMaxVo.forEach((dimension, i) => {
        let grade = data[gradeMap[dimension.dimensionName]] || "";
        let gradeAverage = average[gradeMap[dimension.dimensionName]] || "";
        radarCategories.value.push(dimension.dimensionName + "\n" + grade);
        let allScore = gradeArr.findIndex((item) => item === grade) + 1;
        let averageScore =
          gradeArr.findIndex((item) => item === gradeAverage) + 1;
          if (honorDimensionalityTabs.value[0].name ==dimension.dimensionName ) {
            gradeIndex.value = grade
          }
        radarChartData.value[0].data.push((allScore * 2) / 10);
        // radarChartData.value[1].data.push((averageScore * 2) / 10);
      });
  }
};
// 用户信息
const getUserInfoById = async () => {
  let res = await getUserInfoByIdApi(curEnterpriseId.value);
  const { code, data } = res;
  if (code == 200) {
    enterpriseInfo.value = data;
    let honorGradeList = data.honorGradeList;
    enterpriseHonorTabs.value = honorGradeList.map((o, i) => {
      let num =
        enterpriseInfo.value.honorMapGroupingByGrade !== null &&
        enterpriseInfo.value.honorMapGroupingByGrade[o] !== undefined
          ? enterpriseInfo.value.honorMapGroupingByGrade[o].length
          : 0;
      enterpriseHonorTotal.value += num;
      return {
        name: o,
        value: i,
        badge: {
          value:
            enterpriseInfo.value.honorMapGroupingByGrade !== null &&
            enterpriseInfo.value.honorMapGroupingByGrade[o] !== undefined
              ? enterpriseInfo.value.honorMapGroupingByGrade[o].length
              : 0,
        },
      };
    });
  }
};
// 个人徽章
const getUserBadgeDetail = async () => {
  let res = await getUserBadgeDetailApi(curEnterpriseId.value);
  const { code, data } = res;
  if (code == 200) {
    let num = [];
    // num.filter
    enterpriseBadgeTotal.value = data.badgeDetailList.length;
    badgeData.value = data.badgeDetailList;
    let badgeTypeList = data.badgeTypeList;
    enterpriseBadgeTabs.value = badgeTypeList.map((o, i) => {
      let list = badgeData.value.filter(
        (item) => item.badgeTypeName == o.badgeTypeName
      );
      console.log("赛选结果", list);
      if (currentIdx.value == i) {
        enterpriseBadgeList.value = list;
      }
      return {
        name: o.badgeTypeName,
        value: i,
        badge: {
          value: list.length,
        },
      };
    });
  } else {
  }
};
onShow(() => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0,
  });
  /* #ifndef MP-WEIXIN */
  curEnterpriseId.value = getUrlParamsInH5()?.id;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  curEnterpriseId.value = getUrlParamsInWeixin()?.id;
  /* #endif */
  getUserInfoById();
  getUserBadgeDetail();
  getUserHonorScore();
});

onLoad(() => {
  /* #ifdef MP-WEIXIN */
  wxSetUpShareFunction(
    `/package_honour/pages/honour/enterprise-honor-detail?&typeName=企业&id=${curEnterpriseId.value}`
  );
  /* #endif */
});
</script>
<style scoped lang=less>
.honor-personal {
  background: @honor-detail-bg;
  background-size: 750rpx 357rpx;
  background-color: @color-white;
  padding-top: 180rpx;

  .absolute-title {
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    font-family: "ali-p";
    font-weight: 500;
    color: @color-origin-white;
    font-size: 31rpx;
    letter-spacing: 2rpx;
  }
  .enterprise-honor-box {
    margin: 35rpx 0;
    :deep(.honor-list) {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .honor {
        width: calc(50% - 11rpx);
        height: 80rpx;
        line-height: normal;
        text-align: center;
        border-radius: 3rpx;
        border: 1px solid @color-green;
        font-family: "ali-p";
        font-size: 23rpx;
        color: @color-green-text;
        margin-bottom: 20rpx;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        .honor_text {
        }
      }
    }
  }

  .enterprise-badge-box {
    margin-top: 50rpx;
    :deep(.honor-badge-list) {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 5rpx;
      padding-top: 10rpx;

      .badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(33.3% - 40rpx);
        margin-top: 30rpx;

        &-img {
          width: 137rpx;
          height: 167rpx;
        }

        &-text {
          font-family: "ali-p";
          font-weight: 500;
          font-size: 23rpx;
          line-height: 35rpx;
          color: @color-black-text;
          margin-top: 18rpx;
        }
      }
    }
  }

  .honor-charts {
    background-color: @color-origin-white;
    margin-top: 30rpx;
    padding: 0 31rpx 18rpx 31rpx;
  }

  .honor-dim-box {
    margin-top: 30rpx;

    :deep(.other-text) {
      margin-top: 23rpx;
      font-family: "ali-l";
      font-size: 23rpx;
      font-weight: 400;
      color: @color-blue-text;
    }

    :deep(.text-content) {
      margin-top: 50rpx;
      display: flex;
      font-family: "ali-l";
      letter-spacing: 2rpx;
      font-size: 31rpx;

      .text {
        color: #68696a;
      }

      .h4 {
        font-family: "ali-m";
        margin-left: 5rpx;
        color: #00b588;
      }
    }
  }
  .honor-img {
    background: @kuafu-apartment-details no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 150vh;
  }
}
</style>
